<template>
  <div>
    <common-head title="购物车"/>
    <div class="content">
      <div class="items">
        <div class="item"
          v-for="(item, index) in cart.items"
          :key="item.id"
        >
        <van-swipe-cell>
          <van-checkbox @click="clickItemCheck(index)" v-model="item.checked" />
          <van-card
            :num="item.num"
            :price="item.minPrice"
            :title="item.name"
            :thumb="item.pic"
          >
            <template #footer>
              <van-stepper v-model="item.num" @change="numChange"/>
            </template>
          </van-card>
           <template #right>
            <van-button @click="delItem(index)" square text="删除" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
        </div>
      </div>
    </div>
    <van-submit-bar :price="cart.total*100" button-text="提交订单" @submit="order">
      <van-checkbox @click="allChecked" v-model="cart.isAllChecked">全选</van-checkbox>
    </van-submit-bar>
    <my-tabbar/>
  </div>
</template>

<script>
import MyTabbar from '../../components/MyTabbar.vue'
import CommonHead from 'components/CommonHead'
import { mapState, mapMutations } from 'vuex'
import { Dialog, Toast } from 'vant'
export default {
  created () {
    this.calc_total() // 计算总价格
  },
  methods: {
    allChecked () {
      // 改变vuex 中的 全选 装填
      this.all_checked(this.cart.isAllChecked)
      // 全选改变单选
      this.allCheckedToSingle(this.cart.isAllChecked)
      this.calc_total()
    },
    clickItemCheck (index) {
      // 点击 商品 选中按钮
      // console.log( this.cart.items[index].checked)
      // 改变 vuex中的该商品选中状态
      this.single_checked({index, checked: this.cart.items[index].checked})
      this.calc_total()
      //  判断 是否 全部选中 如果不是 切换 全选的状态
      const allChecked = this.cart.items.every(item => item.checked)
      this.all_checked(allChecked)
    },
    delItem (index) {
      Dialog.confirm({
        title: '删除商品',
        message: '您确认删除吗?'
      })
        .then(() => {
          this.del_item(index)
          this.calc_total()
        })
        .catch(() => {
          Toast('取消删除了')
        })
    },
    numChange () {
      // 重新  设置 state 中的  购物车数据
      // 重新改变购物车的数据
      this.set_cart(this.cart)
      // 重新计算总价格
      this.calc_total()
    },
    order () {
      // 提交购物车
      alert('提交到订单页')
    },
    ...mapMutations('cart', ['calc_total', 'set_cart', 'del_item', 'single_checked', 'all_checked', 'allCheckedToSingle'])
  },
  computed: {
    ...mapState({
      cart: state => JSON.parse(JSON.stringify(state.cart.cart)) // 深克隆 不然 有引用关系
    })
  },
  components: {
    MyTabbar,
    CommonHead
  }
}
</script>,

<style lang="scss" scoped>
.content{
  margin-top: 46px;
  margin-bottom:100px;
  /deep/ .van-swipe-cell__wrapper{
    display: flex;
    align-items:center;
    background-color: #fafafa;
    .van-checkbox__icon{
      margin: 0 5px;
    }
    .van-card{
      flex:1;
    }
  }
}
 .goods-card {
    margin: 0;
    background-color: #fff;
  }

  .delete-button {
    height: 100%;
  }

  .van-submit-bar{
    bottom: 50px;
  }
</style>
